<template>
  <!-- 添加或修改ai摄像头事件对话框 -->
    <el-dialog :title="title" v-model="open" width="740px" append-to-body>
      <el-form ref="surveillanceEventRef" :model="form" :rules="rules" label-width="100px" class="m-form-inline" inline >
        <el-form-item label="事件编号" prop="eventCode">
          <el-input v-model="form.eventCode" placeholder="请输入事件编号" />
        </el-form-item>
        <el-form-item label="事件持续时间" prop="eventDurationTime">
          <el-date-picker clearable
            v-model="form.eventDurationTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择事件持续时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="事件开始时间" prop="eventBeginTime">
          <el-date-picker clearable
            v-model="form.eventBeginTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择事件开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="事件结束时间" prop="eventEndTime">
          <el-date-picker clearable
            v-model="form.eventEndTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择事件结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="事件图片" prop="picUrl">
          <el-input v-model="form.picUrl" placeholder="请输入事件图片" />
        </el-form-item>
        <el-form-item label="本地事件图片地址" prop="localPicUrl">
          <el-input v-model="form.localPicUrl" placeholder="请输入本地事件图片地址" />
        </el-form-item>
        <el-form-item label="图片宽度" prop="imgWidth">
          <el-input v-model="form.imgWidth" placeholder="请输入图片宽度" />
        </el-form-item>
        <el-form-item label="图片宽度" prop="imageHeight">
          <el-input v-model="form.imageHeight" placeholder="请输入图片宽度" />
        </el-form-item>
        <el-form-item label="事件类型" prop="eventType">
          <el-select v-model="form.eventType" multiple filterable remote reserve-keyword remote-show-suffix
            placeholder="请选择事件类型"
            :remote-method="remoteMethodEventType"
            :loading="loadingEventType"
          >
            <el-option v-for="item in optionsEventType" :key="item.value"
              :label="item.label" :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="删除标识 0正常 1已删除" prop="deleted">
          <el-input v-model="form.deleted" placeholder="请输入删除标识 0正常 1已删除" />
        </el-form-item>
        <el-form-item label="备注信息" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

</template>

<script setup name="Surveillance">
import { getSurveillanceEvent,addSurveillanceEvent, updateSurveillanceEvent } from "@/api/wvp/surveillanceEvent";
const { proxy } = getCurrentInstance();
const emit=defineEmits(['close'])
const form = ref({})
const open = ref(false);
const title = ref("");
const rules = ref( {
 });
 // 表单重置
 function reset() {
   form.value = {
     id: null,
     eventCode: null,
     eventDurationTime: null,
     eventBeginTime: null,
     eventEndTime: null,
     picUrl: null,
     localPicUrl: null,
     imgWidth: null,
     imageHeight: null,
     eventType: null,
     imgLocation: null,
     createTime: null,
     createBy: null,
     updateTime: null,
     updateBy: null,
     deleted: null,
     remark: null
   };
   proxy.resetForm("surveillanceEventRef");
 }

 function cancel() {
     open.value = false;
     reset();
 }


/** 提交按钮 */
function submitForm() {
  proxy.$refs["surveillanceEventRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateSurveillanceEvent(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
             emit("close",false)
        });
      } else {
        addSurveillanceEvent(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
             emit("close",false)
        });
      }
    }
  });
}



function begin(id){
    if(!id){
        reset();
        open.value=true
        title.value = "添加ai摄像头事件";
        return;
    }
  getSurveillanceEvent(id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改ai摄像头事件";
  });
}
defineExpose({
    begin
})
</script>
<style scoped>
.m-form-inline .el-input{
    width: 220px;
}
.m-form-inline .el-select{
    width: 220px;
}
.m-form-inline .el-date-picker{
    width: 220px;
}
</style>